<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>登录页面</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/form.css" />
  </head>

  <body>
    <div class="header container">登录/注册</div>
    <form>
      <span class="error">用户名或密码错误！</span>
      <label>
        <span style="width: 80px; display: inline-block; font-weight: bold;">用户名：</span>
        <input
          type="text"
          name="username"
          placeholder="请输入用户名"
        />
      </label>
      <label>
        <span style="width: 80px; display: inline-block; font-weight: bold;"
          >密&nbsp;&nbsp;&nbsp;码：</span
        >
        <input type="password" name="password" placeholder="请输入密码" />
      </label>
      <p>还没账号?<a href="./register.html"> 去注册</a></p>
      <button type="submit">登录</button>
    </form>

    <script src="../lib/jquery.js"></script>
    <script src="../lib/axios.js"></script>
    <script>
      $(function () {
        var form = $("form");
        var username = form.find('input[name="username"]');
        var password = form.find('input[name="password"]');
        var errorDisplay = $(".error");
        var userRegex = /^[a-z0-9]\w{3,11}$/;
        var passRegex = /\w{6,12}/;

        form.on("submit", function (e) {
          e.preventDefault();
          var usernameValue = username.val();
          var passwordValue = password.val();
          var isValid = true;

          errorDisplay.empty();

          if (!usernameValue) {
            showError("用户名不能为空");
            isValid = false;
          } else if (!userRegex.test(usernameValue)) {
            showError("用户名格式不正确");
            isValid = false;
          }

          if (isValid && !passwordValue) {
            showError("密码不能为空");
          } else if (isValid && !passRegex.test(passwordValue)) {
            showError("密码应为6-12位字母或数字");
          }

          if (isValid) {
            axios
              .post("http://localhost:9000/users/login", {
                username: usernameValue,
                password: passwordValue,
              })
              .then(function (response) {
                if (response.data.code === 1) {
                  sessionStorage.setItem(
                    "nickname",
                    response.data.user.nickname
                  );
                  sessionStorage.setItem("id", response.data.user.id);
                  sessionStorage.setItem("token", response.data.token);
                  window.location.href = "index.html";
                } else {
                  showError(response.data.message || "未知错误");
                }
              })
              .catch(function (error) {
                showError("登录失败");
              });
          }
        });

        function showError(message) {
          errorDisplay.text(message).show();
        }
      });
    </script>
  </body>
</html>
